<template>
	<el-card class="container">
		<div slot="header">
			<span>主题列表</span>
			<el-button
				style="float: right; padding: 3px 0"
				type="text"
				@click="save_dialog = true"
				>新增</el-button
			>
			<el-button
				style="float: right; padding: 3px 6px"
				type="text"
				>上传</el-button
			>
		</div>
		<div class="theme-content">
			<div
				class="theme-item"
				v-for="(theme, index) in themes"
				:key="index"
			>
				<div class="name">
					<span>{{ theme.name }}</span>
					<div class="show">
						<el-button
							type="text"
							style="font-size: 24px"
							icon="el-icon-download"
						></el-button>
						<el-button
							type="text"
							style="color: #f56c6c; font-size: 24px"
							icon="el-icon-delete"
							@click="remove(theme.id)"
						></el-button>
					</div>
				</div>
				<div class="option">
					<el-button
						type="text"
						:disabled="theme.is_enable === 1"
						@click="enable(theme.id)"
						>启用</el-button
					>
					<el-button
						type="text"
						:disabled="theme.type === 2"
						@click="sync(theme.id)"
						>同步</el-button
					>
				</div>
			</div>
		</div>
		<el-dialog :visible.sync="save_dialog" title="新增主题" width="700px">
			<el-form label-width="80px">
				<el-form-item label="名称">
					<el-input
						v-model="theme.name"
						style="width: 360px"
					></el-input>
				</el-form-item>
				<el-form-item label="来源">
					<el-select v-model="theme.type">
						<el-option label="远程地址" :value="1"></el-option>
						<el-option label="本地目录" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="theme.type == 1 ? '链接' : '地址'">
					<el-input v-model="theme.source"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer">
				<el-button type="primary" @click="save">保存</el-button>
			</div>
		</el-dialog>
	</el-card>
</template>

<script>
import theme_api from "@/api/theme";

export default {
	data: () => {
		return {
			themes: [],
			save_dialog: false,
			theme: {
				name: "",
				type: 1,
				source: "",
			},
			condition: {
				page_num: 1,
				page_size: 10,
			},
			total: 0,
		};
	},
	created() {
		this.page();
	},
	methods: {
		page() {
			theme_api.page(this.condition, (res) => {
				this.themes = res.data.records;
				this.total = res.data.total;
			});
		},
		save() {
			let text = "";
			if (this.theme.type === 1) {
				text = "克隆主题中";
			} else if (this.theme.type === 2) {
				text = "检查目录中";
			}
			const loading = this.$loading({
				lock: true,
				text: text,
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)",
			});
			theme_api.save(
				this.theme,
				(res) => {
					this.$message.success("新增主题成功");
					this.save_dialog = false;
					this.condition.page_num = 1;
					this.condition.page_size = 10;
					this.theme = {
						name: "",
						type: 1,
						source: "",
					};
					this.page();
					loading.close();
				},
				() => {
					this.$message.error("新增主题失败");
					this.save_dialog = false;
					loading.close();
				}
			);
		},
		enable(id) {
			const loading = this.$loading({
				lock: true,
				text: "启用中",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)",
			});
			theme_api.enable(
				id,
				() => {
					this.$message.success("启用成功");
					loading.close();
					this.page();
				},
				() => {
					this.$message.error("启用失败");
					loading.close();
				}
			);
		},
		sync(id) {
			const loading = this.$loading({
				lock: true,
				text: "同步中",
				spinner: "el-icon-loading",
				background: "rgba(0, 0, 0, 0.7)",
			});
			theme_api.sync(
				id,
				() => {
					this.$message.success("同步成功");
					loading.close();
					this.page();
				},
				() => {
					this.$message.error("同步失败");
					loading.close();
				}
			);
		},
		remove(id) {
			this.$confirm("此操作将永久删除该主题, 是否继续?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			}).then(() => {
				theme_api.remove(id, () => {
					this.condition.page_num = 1;
					this.condition.page_size = 10;
					this.page();
					this.$message({
						type: "success",
						message: "删除成功!",
					});
				});
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.container {
	position: absolute;
	top: 20px;
	left: 20px;
	right: 20px;
	bottom: 20px;
}
.theme-content {
	display: flex;
}
.theme-item {
	margin: 10px;
	width: 150px;
	height: 200px;
	box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
	.name {
		height: 130px;
		width: 130px;
		margin: 10px;
		line-height: 130px;
		text-align: center;
		background-color: #f2f2f2;
		position: relative;
		.show {
			display: none;
			position: absolute;
			top: 0;
			left: 0;
			padding: 0 20px;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.6);
			justify-content: space-between;
		}
		&:hover .show {
			display: flex;
		}
	}
	.option {
		text-align: center;
		display: flex;
		justify-content: space-between;
		padding: 0 20px;
	}
}
</style>